import React, { Component } from 'react'
import { connect, Dispatch, history } from 'umi'
import { Table, Image,Collapse,Space,Popconfirm,Button } from 'antd'
import { IListC } from './model'
import { delectCart } from '@/service/cart'
import './index.less'
// "cartid": "cart_2b7ae4dc-31b4-4281-a3de-4ce221a6fea4",
//             "userid": "user_b691b96b-7de9-464a-bbe8-c38cc651bd00",
//             "username": "",
//             "tel": "13000000000",
//             "proid": "pro_a92ecfc8-1747-4a92-a766-c81e02a89dbb",
//             "proname": "JavaScript高级程序设计 第4版(图灵出品）",
//             "img1": "https://img10.360buyimg.com/n1/jfs/t1/119119/28/16355/390609/5f4870aaE11ee9a70/a3942abebcb6534a.jpg",
//             "originprice": 129,
//             "discount": 7.9,
//             "sales": 96000,
//             "stock": 9999,
//             "category": "图书",
//             "brand": "iTuring"

class cart extends Component {
    constructor(props: any) {
        super(props)
    }
    state = {
        cartList: []
    }
    componentDidMount() {
        this.props.dispatch({
            type: 'cart/getCartW'
        })
    }
    render() {
        const { cartList, dispatch } = this.props
        // console.log(cartList);
        let height = 0
        let width = 0
        const h = document.getElementsByTagName('html')
        height = h[0].clientHeight
        width = h[0].clientWidth

        const columns: any = [
            {
                title: '用户名称',
                align: 'center',
                dataIndex: 'username',
                key: 'username',
                width: 120,
                ellipsis: true,
            },
            {
                title: '手机号',
                align: 'center',
                dataIndex: 'tel',
                key: 'tel',
                width: 160,
                ellipsis: true,
            },
            {
                title: '商品名称',
                align: 'center',
                dataIndex: 'proname',
                key: 'proname',
                width: 160,
            },
            {
                title: '预览',
                align: 'center',
                dataIndex: 'img1',
                key: 'img1',
                ellipsis: true,
                width: 180,
                render(text:any){
                    return (
                        <Image
                        width={100}
                        src={text}
                        />
                    )
                }
            },
            {
                title: '原价',
                align: 'center',
                dataIndex: 'originprice',
                key: 'originprice',
                ellipsis: true,
                width: 80,
                sorter (a: IListC, b: IListC) {  // ********************
                    return a.sales - b.sales
                }
            },
            {
                title: '折后价',
                align: 'center',
                dataIndex: 'discount',
                key: 'discount',
                ellipsis: true,
                width: 80,
                sorter (a: IListC, b: IListC) {  // ********************
                    return a.sales - b.sales
                  },
                render(text:any,record:any){
                    return (
                        <div>{text * record['originprice'] /10}</div>
                    )
                }
            },
            {
                title: '销量',
                align: 'center',
                dataIndex: 'sales',
                key: 'sales',
                ellipsis: true,
                width: 80,
                sorter (a: IListC, b: IListC) {  // ********************
                    return a.sales - b.sales
                  }
            },
            {
                title: '库存',
                align: 'center',
                dataIndex: 'stock',
                key: 'stock',
                ellipsis: true,
                width: 80,
                sorter (a: IPro, b: IPro) {  // ********************
                    return a.sales - b.sales
                  }
            },
            {
                title: '分类',
                align: 'center',
                dataIndex: 'category',
                key: 'category',
                ellipsis: true,
                width: 80,
            },
            {
                title: '商标',
                align: 'center',
                dataIndex: 'brand',
                ellipsis: true,
                key: 'brand',
                width: 80,
            },
            {
                title: '操作',
                fixed: 'right',
                width: 180,
                align: 'center',
                render (text: null, record: IListC, index: number) {
                  return (
                    <Space>
                      <Button type="ghost">编辑</Button>
                      <Popconfirm
                        title="确定删除吗?"
                        onConfirm={() => {
                            delectCart({ cartid: record.cartid }).then(() => {
                            const arr = JSON.parse(JSON.stringify(cartList))
                            arr.splice(index, 1)
                            dispatch({
                              type: 'cart/UPDATA_CART',
                              payload: arr
                            })
                          })
                        }}
                        okText="确定"
                        cancelText="取消"
                      >
                        <Button danger>删除</Button>
                      </Popconfirm>
                    </Space>
                  )
                }
            }
        ];
        return (
            <div>
                <Table dataSource={cartList} columns={columns} rowKey="cartid" scroll={{ x: 1300, y: height * 0.62 }} />;
            </div>
        )
    }
}
export default connect(state => {
    return {
        cartList: state.cart.cartList
    }
})(cart)